<template>
	<div class="header" :style="style">
		<div class="header-body">
			<div class="left">
				<div class="logo">
					<img :src="logo" />
				</div>
			</div>
			<div class="middle">
				<slot name="search">

				</slot>
			</div>
			<div class="right">
				<el-dropdown teleported="true" popper-class="header-lang">
					<div class="language">
						<img :src="state.lang.icon" />
						<div class="text">{{state.lang.title}}</div>
					</div>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item v-for="item in langs" @click="langClick(item)">
								<div class="menu-item">
									<img :src="item.icon" />
									<span>{{item.title}}</span>
								</div>
							</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>

				<div class="menu">
					<el-dropdown teleported="true" popper-class="header-menu">
						
						<img src="@/assets/images/ui/header/menu.png"/>
						
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item v-for="item in menus" @click="menuClick(item)">
									<div class="menu-item menu">
										<span>{{item.title}}</span>
									</div>
								</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
					
					<img src="@/assets/images/ui/header/cart.png" />
					<img src="@/assets/images/ui/header/chat.png" />
					
					<el-dropdown teleported="true" popper-class="header-menu">
						
						<img src="@/assets/images/ui/header/my.png" />
						
						<template #dropdown>
							<el-dropdown-menu>
									<div class="menu-item user">
										
										<button class="sign"  @click="userClick('sign')">
											{{state.sign}}
										</button>
										
										<button class="join"   @click="userClick('join')">
											{{state.join}}
											<img src="@/assets/images/ui/header/free.png"/>
										</button>
										
									</div>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div>


			</div>
		</div>
		
	</div>

</template>

<script lang="setup">
	import {
		defineComponent,
		ref,
		reactive,
		onMounted,
		onUnmounted
	} from 'vue';
	
	import i18n from "@/i18n/index";

	import english from "@/assets/images/ui/header/english.png";
	import china from "@/assets/images/ui/header/china.png";
	

	// 使用特殊的编译宏来指定组件的名称
	export default defineComponent({
		name: 'TheHeader',
	
	    props: {
			logo: {
				type: String,
				default: '',
				require: true
			},
			lang: {
				type: String,
				default: 'en',
			},
			style:{
				type:String,
				default:''
			}
		},
		setup: (props, {
					emit
				}) => {

			const t =i18n.global.t;
	
			const menus = ref([{
				id: 'easybuy',
				title: t("top_menu.menus.easy_buy"),
				url: ''
			}, {
				id: 'shop',
				title: t("top_menu.menus.shop"),
				url: ''
			}, {
				id: 'group',
				title: t("top_menu.menus.group"),
				url: ''
			}, {
				id: 'catalog',
				title: t("top_menu.menus.catalog"),
				url: ''
			}, {
				id: 'contact',
				title: t("top_menu.menus.contact"),
				url: ''
			}]);

			const langs = ref([{
				id: "en",
				icon: english,
				title: t("lang.english")
			}, {
				id: "zh",
				icon: china,
				title: t("lang.chinese")
			}])


			let state = reactive({
				isMenu: false,
				lang: {
					icon: langs.value[0].icon,
					title: langs.value[0].title
				},
				join: t("top_menu.user.join"),
				sign: t("top_menu.user.sign")
			})
						
			const langClick = (item) => {
				console.log("click")
				
				state.lang.icon=item.icon;
				state.lang.title=item.title;

				let _item = {
					id: item.id,
					title: item.title,
					type: 'lang'
				}
				emit("headerClick", _item);
			}
			
			const menuClick = (item) => {
				console.log("click")
			
				let _item = {
					id: item.id,
					title: item.title
				}
			
				_item.type = "menu";
				emit("headerClick", _item);
			}
			
			const userClick=(button)=>{
				let _item = {
					id: button,
					title: button
				}
							
				_item.type = "user";
				emit("headerClick", _item);
			}
			
			return {
				menus,
				langs,
				state,
				t,
				menuClick,
				langClick,
				userClick
			}
		}
	})
</script>

<style scoped lang="scss">
	.header {
		height: 158px;
		width: 100%;
		margin: 0;
		position: relative;
		border-bottom:1px solid #c2c2c2;
		padding-bottom: 5px;

		.header-body {
			height: 100%;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				height: 100%;
				width: 20%;
				display: flex;
				justify-content: left;
				align-items: center;

				.logo {
					cursor: pointer;
					margin-left: 62px;

					width: 286px;
					height: 114px;

					img {
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}
			}

			.middle {
				height: 100%;
				width: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.right {
				height: 100%;
				width: 30%;
				display: flex;
				align-items: flex-end;
				justify-content: flex-end;
				flex-direction: column;
				padding-right: 80px;
				position: relative;


				.language {
					display: flex;
					align-items: center;
					margin-bottom: 15px;
					position: relative;
					
					&:focus{
						outline:none !important;
					}

					img {
						width: 32px;
						height: 32px;
						cursor: pointer;
					}

					.text {
						margin-left: 15px;
						cursor: pointer;
						text-align: right;
					}
				}

				.menu {
					position: relative;
					display: flex;
					align-items: center;
															

					img {
						width: 32px;
						height: 32px;
						cursor: pointer;						
						
						&:focus{
							outline:none !important;
						}
					}
				}
			}
		}
	}
	
	.header-lang, .header-menu{

		.menu-item {

			font-size: 16px;
			//border-bottom: 1px solid #f2f2f2;
			color: #666;
			cursor: pointer;
			display: flex;
			align-items: center;
			padding: 5px;

			&.menu {
				min-width: 180px;
				padding-left: 5px;
				padding-right: 5px;
				padding-top: 5px;
				padding-bottom:10px;
			}
			
			&.user{
				width: 280px;
				height: 140px;
								
				display:flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				
				button{
					width:140px;
					height:40px;
					color: white;
					cursor:pointer;
					
					outline: none !important;
					border: none !important;
					border-radius: 40px;
					
					position: relative;
					
					img{
						position: absolute;
						right: -30px;
						top: -26px;
						
						width:48px;
						height: 48px;
					}
				}
				
				.sign{
					
					background-color: rgba(249, 66, 66, 1);
				}
				
				.join{
					background-color: rgba(8, 144, 36, 1);
					margin-top: 30px;
				}
			}

			&:hover {
				color: #CA3E31 !important;
			}
			
			button{
				border-radius: 10px;
				height: 32px;
				width: 100px;
			}

			img {
				width: 32px;
				height: 32px;
				margin-right: 10px;
			}
		}
	}
	
	::v-deep .el-dropdown-menu__item{
		border-bottom: 1px solid #f2f2f2;
		
		&:last-child {
			border: 0;
		}
	}
</style>